<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=1200,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <script type="text/javascript" src="lib/PIE_IE678.js"></script>
    <![endif]-->
    <link href="http://static.h-ui.net/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://lib.h-ui.net/jquery/1.9.1/jquery.min.js"></script>
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>幻灯片效果</title>
    <meta name="keywords" content="幻灯片效果"/>
    <style type="text/css">
        #slider-1 {
            width: 760px;
            text-align: center
        }

        #slider-1 .bd, #slider-1 .bd li, #slider-1 .bd img {
            width: 760px;
            height: 220px
        }

        #slider-1 .hd {
            margin-top: 2px;
            height: 58px;
            width: 762px;
            position: static;
            padding: 0;
        }

        #slider-1 .hd li {
            position: relative;
            display: inline-block;
            float: left;
            margin-right: 2px;
            cursor: pointer;
            width: 125px;
            height: 58px;
        }

        #slider-1 .hd li img {
            display: block;
            width: 125px;
            height: 58px;
        }

        #slider-1 .hd li i {
            position: absolute;
            display: block;
            z-index: 9;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.6)
        }

        #slider-1 .hd li.active i {
            width: 11px;
            height: 6px;
            background: url(images/iconpic-arrow-up.png) no-repeat 0 0;
            top: -6px;
            left: 50%;
            margin-left: -5px;
            bottom: auto;
            right: auto
        }
    </style>
</head>
<body>
<div id="slider-1" class="bg-fff box-shadow radius">
    <div class="slider">
        <div class="bd bg-fff">
            <ul>
                <li><a href="#" target="_blank"><img src="images/b-1.jpg"></a></li>
                <li><a href="#" target="_blank"><img src="images/b-2.jpg"></a></li>
                <li><a href="#" target="_blank"><img src="images/b-3.jpg"></a></li>
                <li><a href="#" target="_blank"><img src="images/b-4.jpg"></a></li>
                <li><a href="#" target="_blank"><img src="images/b-5.jpg"></a></li>
                <li><a href="#" target="_blank"><img src="images/b-6.jpg"></a></li>
            </ul>
        </div>
        <ol class="hd cl">
            <li><i></i><img src="images/s-1.jpg"></li>
            <li><i></i><img src="images/s-2.jpg"></li>
            <li><i></i><img src="images/s-3.jpg"></li>
            <li><i></i><img src="images/s-4.jpg"></li>
            <li><i></i><img src="images/s-5.jpg"></li>
            <li><i></i><img src="images/s-6.jpg"></li>
        </ol>
    </div>
</div>
<script type="text/javascript" src="http://lib.h-ui.net/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
<script type="text/javascript">
    $(function () {
        jQuery("#slider-1").slide({
            mainCell: ".bd ul",
            titCell: ".hd li",
            trigger: "click",
            effect: "leftLoop",
            autoPlay: true,
            delayTime: 850,
            interTime: 7000,
            pnLoop: false,
            titOnClassName: "active"
        });
    });
</script>
</body>
</html>